<template>
  <div>
    <table
      class="table table-bordered"
      v-for="(ele, index) in tableData"
      :key="index"
      v-loading="loading"
    >
      <tbody>
        <tr>
          <td width="15%" class="td-label">表号</td>
          <td width="30%">
            <span class="text-primary cursor-pointer" @click="showChart(ele)">
              {{ ele.ele_table_no || '-' }}
            </span>
          </td>
          <td width="15%" class="td-label">户名</td>
          <td width="30%">{{ ele.ele_table_account || '-' }}</td>
          <td rowspan="2" width="10%" class="text-center" style="vertical-align: middle">
            <el-button type="text" @click="showChart(ele)">
              <i class="fa fa-line-chart"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td class="td-label">地址</td>
          <td>{{ ele.ele_table_address || '-' }}</td>
          <td class="td-label">联系电话</td>
          <td>{{ ele.ele_table_phone || '-' }}</td>
        </tr>
      </tbody>
    </table>

    <p
      class="p-5 bg-light text-center text-muted border rounded"
      v-if="!loading && !tableData.length"
    >
      暂无电表信息
    </p>

    <after-ele-chart-dialog :visible.sync="chartVisible" :ele-id="eleId"></after-ele-chart-dialog>
  </div>
</template>

<script>
import AfterEleChartDialog from '@/credit/views/city/self/after/AfterEleChartDialog'

export default {
  components: {
    AfterEleChartDialog,
  },
  props: {
    relatedId: {
      type: String,
      default: '',
    },
    farmId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        'customer_related_id.eq': '',
      },
      loading: false,
      tableName: 'datum_customer_ele_table',
      tableData: [],

      // 图表
      chartVisible: false,
      eleId: '',
    }
  },
  computed: {
    watchString() {
      return this.relatedId + this.farmId
    },
  },
  watch: {
    watchString: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getData() {
      if (!this.relatedId && !this.farmId) return
      this.params['customer_related_id.eq'] = this.relatedId
      this.params['customer_id.eq'] = this.farmId

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params)
      )
      this.loading = false

      this.tableData = (res && res.data) || []
    },
    showChart(row = {}) {
      this.eleId = row.credit_ele_table_id
      this.chartVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.td-label {
  background-color: #fafafa;
  text-align: center;
}
</style>
